<!-- 查看整列的档案或者档案盒 -->
<template>
  <el-dialog title="查看 档案/档案盒" v-model="dialogVisible" width="66%" :close-on-click-modal="false"
    :before-close="handleClose" :append-to-body="true">
    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
      <el-form-item label="题名/档号">
        <el-input v-model.trim="formInline.archiveNoOrName" placeholder="请输入题名/档号" clearable></el-input>
      </el-form-item>
      <el-form-item label="盒名/盒号">
        <el-input v-model.trim="formInline.boxNoOrName" placeholder="请输入盒名/盒号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" row-key="labelId" border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" class="max-height-table"
      :row-class-name="tableRowClassName" height="55vh">
      <el-table-column prop="boxName" label="题名/盒名">
        <template #default="scope">
          <span v-if="scope.row.labelType == 1">{{ scope.row.boxName }}</span>
          <span v-else>{{ scope.row.archiveName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="boxNo" label="档号/盒号">
        <template #default="scope">
          <span v-if="scope.row.labelType == 1">{{ scope.row.boxNo }}</span>
          <span v-else>{{ scope.row.archiveNo }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="labelType" label="类型">
        <template #default="scope">
          <el-tag v-if="scope.row.labelType == 1" type="info">档案盒</el-tag>
          <el-tag type="info" v-else>档案</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="positionName" label="存放位置"> </el-table-column>
    </el-table>
    <pagination ref="pagination" :totalCount="totalCount" @pagination="pagination" style="margin-top: 10px">
    </pagination>
  </el-dialog>
</template>

<script>
import { pageByColAndZy } from '@/api/rfid/label'

export default {
  name: 'seeColData',
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      formInline: {},
      totalCount: 0, //总数
      searchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      item: {},
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (row.labelType === 0) {
        return 'archive-row'
      }
      return ''
    },
    // 关闭s
    handleClose() {
      this.dialogVisible = false
    },
    // 显示
    show(item, zyType) {
      this.dialogVisible = true
      this.item = item
      this.zyType = zyType
      this.getColData()
    },
    // 获取整列的数据
    getColData() {
      const param = Object.assign(this.formInline, this.searchModel, {
        colId: this.item.colId,
        zyNo: this.zyType,
      })
      pageByColAndZy(param).then((res) => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.records
          this.totalCount = res.data.data.total
        }
      })
    },
    onSubmit() {
      this.$refs.pagination.resetPagination()
    },
    pagination(val) {
      this.searchModel.pageNo = val.page
      this.searchModel.pageSize = val.limit
      this.getColData()
    },
  },
}
</script>
<style lang="less" scoped>
.el-table {
  .archive-row {
    background: #d9ecff;
  }
}
</style>
